<template>
  <div class="nav">
    <div
      class="nav-item"
      :class="route.path.includes(item.key) ? 'active' : ''"
      @click="() => changeNav(item.key)"
      v-for="item in navList"
      :key="item.key"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useEditorStore } from '@/store/editor';

const route = useRoute();
const router = useRouter();
const editorStore = useEditorStore();

const navList = [
  { key: 'stage', title: '场景' },
  { key: 'panel', title: '面板' },
  { key: 'event', title: '蓝图' },
];

const changeNav = (nav: string) => {
  router.push(`/editor/${editorStore.sceneId}/${nav}`);
};
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  border-radius: 4px;
  overflow: hidden;

  .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 28px;
    font-size: 14px;
    color: #fff;
    background: #323232;
    cursor: pointer;
    user-select: none;

    &.active {
      background: var(--el-color-primary);
    }
  }
}
</style>
